<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选择器</title>
</head>
<body>

<div class="box"><div class="message"></div></div>

<ul>
    <li>项目1</li>
    <li>项目2</li>
    <li>项目3</li>
</ul>

</body>
<script src="../0.vendor/jquery-3.6.0.js"></script>
<script>

    /**
     *   jquery 和 原生JavaScript的相互转换
     *      jquery 选择器 获得是一个集合
     *      原生js选择器 单个dom节点/ dom节点结合
    * */


  /*  $('#message').text("hello")
    $('div').text("world")*/

   /* document.getElementById('message').innerText = "teee";
    document.getElementsByTagName('div');*/

   /*1. 原生 ---> jQuery*/
   //$(document.getElementById('message')) .text("hello")

   /*2. jQuery--> 原生js*/
   // $('#message').innerText = "dd";
   // $('#message').get(0).innerText = "ddd";


    /**
     * css选择器
    * */

    $('.box  .message').text("box message")

    $('ul li:eq(2)').text("test"); // eq equals
    $('ul li:gt(1)').text(">");    // great than
    $('ul li:lt(1)').text("<");    // less  than
</script>
</html>